<template>
  <div class="info">
    <div class="personalTop">
      <div class="title">修改手机</div>
      <div class="tips">使用新的联系手机号代替原有手机号.</div>
    </div>
    <el-divider></el-divider>
    <div class="cont">
      <el-form ref="form" :model="form" class="formWaip" label-position="top">
        <el-form-item label="密码：">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入新手机：">
          <el-input
            v-model="form.phone"
            placeholder="请输入您新的手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机验证码：" class="disflex">
          <el-input
            v-model="form.code"
            placeholder="请输入验证码"
          ></el-input>
          <el-button
            plain
            style="width: 100%"
            type="submit"
            @click="sendCode"
            >{{ codeMsg }}</el-button
          >
        </el-form-item>
      </el-form>

      <div style="text-align: center">
        <el-button plain type="primary" @click="submitForm">提交保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { updPhone } from "@/api/UserInfo";
import { getUserInfo } from "@/utils/auth";
import { SendSms, CheckPhoneCode } from "@/api/Certification";
export default {
  data() {
    return {
      form: {},
      codeMsg: "发送验证码",
      canClick: true,
      totalTime: 10,
    };
  },
  created() {
    this.userInfo = JSON.parse(getUserInfo());
  },
  methods: {
    sendCode() {
      if (!this.form.phone) {
        this.$message.warning("请输入电话号码");
        return false;
      }

      if (!this.canClick) return false;
      this.canClick = false;
      SendSms({ receive: this.form.phone }).then((res) => {
        if (res.data.value.code == 200) {
          this.$message.success("发送成功");
          this.codeMsg = this.totalTime + "s";
          let clock = setInterval(() => {
            this.totalTime--;
            this.codeMsg = this.totalTime + "s";
            if (this.totalTime < 0) {
              window.clearInterval(clock);
              this.codeMsg = "重新发送";
              this.totalTime = 10;
              this.canClick = true;
            }
          }, 1000);
        } else {
          this.canClick = true;
          this.$message.error(res.data.value.msg);
        }
      });
    },
    submitForm() {
      CheckPhoneCode({
        receive: this.form.phone,
        code: this.form.code,
      }).then((res) => {
        if (res.code == 0) {
          updPhone(this.form).then((res) => {
            if (res.code == 0) {
              this.$message.success(res.data);
            } else {
              this.$message.error(res.data);
            }
          });
        } else {
          this.$message.error(res.data);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.info {
  .cont {
    width: 520px;
    margin: 0 auto;
    padding-bottom: 40px;
    ::v-deep {
      .el-form-item {
        margin-bottom: 10px;
      }
      .el-form-item__label {
        padding: 0;
      }
    }
    .disflex {
      ::v-deep {
        .el-form-item__content {
          display: flex;
          button {
            width: 130px !important;
            margin-left: 20px;
            padding: 12px 0 !important;
            font-size: 14px;
            color: #fff;
          }
        }
        .el-button--submit {
          background: #2eb0c6;
        }
      }
    }
  }
}
</style>